<template>
    <div>
        <span>热门推荐</span>&nbsp;
        <a href="http://192.168.56.1:800/find/songs#/find/songs">华语|</a>&nbsp;
        <a href="http://192.168.56.1:800/find/songs#/find/songs">流行|</a>&nbsp;
        <a href="http://192.168.56.1:800/find/songs#/find/songs">摇滚|</a>&nbsp;
        <a href="http://192.168.56.1:800/find/songs#/find/songs">电子|</a>
        <hr style="height: 10px;">
        <div @click="setRouterimg">
            <img src="http://p1.music.126.net/vZ5ef3WzRneTTydXSzPauQ==/109951165994871935.jpg" alt="" width="200"
                height="200">
            <p>别急，甜甜的恋爱马上就轮到你了</p>
        </div>

    </div>
    <!-- <hr>
     生命周期钩子函数的作用是
     在组件的生命周期的不同阶段执行特定的代码。
     它们主要用于处理组件的挂载、更新和销毁等生命周期事件，
     以便开发者可以在这些关键时刻进行相应的操作。 
     口语化表达就是，
     生命周期钩子函数就是在组件的出生、成长和死亡的不同阶段，
    <div @click="getlif">
        <p>{{ msg }}</p>
    </div>
    <div>
        <button id="count" @click="count++">{{ count }}</button>
    </div> -->
</template>

<script setup>
import { onMounted, onUpdated, ref } from 'vue';//引入vue的钩子函数，用于生命周期钩子的使用
//生命周期有8个阶段，分别是：
// 1.创建前：beforeCreate
// 2.创建后：created
// 3.挂载前：beforeMount
// 4.挂载后：mounted
// 5.更新前：beforeUpdate
// 6.更新后：updated
// 7.销毁前：beforeDestroy/beforeUnmount（Vue 3中使用）
// 8.销毁后：destroyed/unmounted（Vue 3中使用）

import { RouterView, useRouter } from 'vue-router'//引入路由跳转的钩子函数
const router=useRouter()  //路由跳转
// const msg = "我是推荐页面"
// const count = ref(0)
// const getlif = () => {
//     console.log("点击了");
// }
const setRouterimg = () => { 
    console.log("点击了图片");
    //router.push("/musicdite")  // 可以采用path 或者 name 来进行路由跳转
    // router.push({name:"musicdite",params:{id:123}})
    //如果在里面不是一张图片，而是div列表填充的话，那么就需要用到路由的params来进行传值了。
   router.push({ path: "/find/musicdite", query: { id: 123 } })   
}
//页面挂载 当页面加载的时候会把索要执行的函数或变量 一并显示到页面
// onMuted  在页面加载的时候执行


// onMounted(() => { 
//     getlif()
//     console.log("我是推荐页面组件的mounted生命周期钩子函数执行了");
    
// })
//onUpdated 是在页面更新的时候执行，
// 比如点击事件改变了数据，那么就会触发这个钩子函数。

// onUpdated(() => { 
//     console.log(document.getElementById("count").textContent);
    
// })

</script>

<style lang="css" scoped>
a{
    text-decoration: none;
}    
</style>